<template>
  <el-form :inline="true" :model="formData" class="demo-form-inline">
    <el-form-item>
      <el-date-picker style="width: 210px"
                      v-model="formData.dateRange"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
  <div>
    <baidu-map class="map" :center="center" :zoom="14" :scroll-wheel-zoom="true">
      <bml-heatmap :data="data" :max="max" :radius="20">
      </bml-heatmap>
    </baidu-map>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, reactive} from 'vue';
import {trackApi} from "@/api/index"
import {BmlHeatmap} from 'vue-baidu-map-3x';
import * as dayjs from "dayjs";

const formData = reactive({
  venueIds: [],
  //TODO
  dateRange: [dayjs().add(-7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
})
const max = ref(0)
const data = ref([]);
const center = reactive({
  lng: 113.8044655468814,
  lat: 34.79234184396662
})

onMounted(() => {
  callTrackApi()
})

const callTrackApi = () => {
  let params = {}
  if (formData.venueIds.length != 0) {
    params.venueIds = formData.venueIds
  }
  params.startDate = formData.dateRange[0]
  params.endDate = formData.dateRange[1] + " 23:59:59"
  trackApi.heatmap.call(params).then((res: any) => {
    res.sort((a: any, b: any) => b.count - a.count)
    let highest = res[0];
    center.lat = highest.lat
    center.lng = highest.lng
    max.value = highest.count
    data.value = res
  })
}
const onSubmit = () => {
  callTrackApi()
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 400px;
}
</style>
